<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="dynamic-component-demo" class="demo">
  <button
          v-for="tab in tabs"
          v-bind:key="tab"
          v-bind:class="['tab-button', { active: currentTab === tab }]"
          v-on:click="currentTab = tab"
  >
    {{ tab }}
  </button>

  <component v-bind:is="currentTabComponent" class="tab"></component>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        currentTab: 'Home',
        tabs: ['Home', 'Posts', 'Archive']
      }
    },
    computed: {
      currentTabComponent() {
        return 'tab-' + this.currentTab.toLowerCase()
      }
    }
  })

  app.component('tab-home', {
    template: `<div class="demo-tab">Home component</div>`
  })
  app.component('tab-posts', {
    template: `<div class="demo-tab">Posts component</div>`
  })
  app.component('tab-archive', {
    template: `<div class="demo-tab">Archive component</div>`
  })

  app.mount('#dynamic-component-demo')
</script>
</body>
</html>

